import echarts from 'echarts';
export function option3({ max, min = 0, data, Xaxis = ['0', '20', '30', '40', '50'] }) {
    const option = {
        tooltip: {
            trigger: 'axis',
            textStyle: {
                fontSize: 10
            },
            formatter: function (params) {
                let html = `<span style='max-width:50px;
                            width:50px;
                            display:table-cell;
                            max-height:50px;
                            min-height:50px;
                            height:50px;
                            border:1px solid #089ca6;
                            background:rgba(0,240,255,0.5);
                            border-radius:50%;
                            color:#fff;
                            text-align:center;
                            white-space: normal;
                            vertical-align:middle;
                            overflow:hidden;
                        '>`;
               params.forEach(item => {
                    html+=`${item.seriesName} : ${item.value}`
                });
                return html+=`</span>`
            },
            backgroundColor: 'transparent'
        },
        color: ['#2b9cdf', '#e75b2e'],
        legend: {
            show: false,
            orient: 'horizontal',
            left: 'center',
            data: ['CLI'],
            textStyle: {
                color: '#fff'
            },
            icon: 'path://M512 0c282.752 0 512 229.248 512 512s-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0z m0 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m0 213.333334a213.333333 213.333333 0 1 1 0 426.666666 213.333333 213.333333 0 0 1 0-426.666666z'
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisline: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#909293',
                }
            },
            axisTick: {
                show: false
            },
            axisline: {
                show: true,
                lineStyle: {
                    type: 'dotted'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#3b4042',
                }
            },
            data: Xaxis,
        }],
        yAxis: [{
            type: 'value',
            min: min,
            max: max,
            axisLabel: {
                textStyle: {
                    color: '#909293',
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#3b4042'
                }
            },
            splitLine: {
                lineStyle:{
                    color:'#282a2c'
                }
            },
            axisTick: {
                lineStyle: {
                    width: 2,
                    color: '#5e6264'
                }
            },
        }],
        series: [{
            name: 'CLI',
            type: 'line',
            smooth: 0.5,
            symbol: 'circle',
            symbolSize: 8,
            symbolColor:'#000',
            data: data,
            lineStyle: {
                color: '#00f0ff',
                shadowColor:'#000',
                shadowBlur:10,
                shadowOffsetY:5
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    color: '#818587'
                },

            },
            itemStyle:{
                color:'rgba(0,240,255,0.5)',
                borderColor:'rgba(0,240,255,1)'
            }
        }]
    }
    return option;
}

